<template>
    <div class="pageMain">

        <div class="header">
            <van-nav-bar title="地址管理" left-arrow @click-left="toBack" />
        </div>

        <div class="contentBox">
            <!-- start:地址管理盒子 -->
            <div v-if="addressList.length > 0">
                <ul class="address-box">
                    <li class="address-items" v-for="(item, index) in addressList" :key="index" @click="liClick(item)">
                        <div class="address-border">
                            <p class="address-info">
                                <span>{{ item.userName }}</span>
                                <span>{{ item.userTel }}</span>
                            </p>
                            <p class="address-text">{{ item.userAddr }}</p>
                        </div>
                        <div class="icon-items">
                            <div class="icon-box">
                                <span class="icon-box-style mr-8" @click.stop="editClick(item)">
                                    <img src="../../assets/geren/address-edit.png" class="icon-box-img">
                                    <span>编辑</span>
                                </span>
                                <span class="icon-box-style" @click.stop="delClick(item.addressId)">
                                    <img src="../../assets/geren/address-delete.png" class="icon-box-img">
                                    <span>删除</span>
                                </span>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- 添加收货地址按钮 -->
                <div class="btn-box">
                    <button type="button" class="receive-btn" @click="addAddress">添加收货地址</button>
                </div>
            </div>

            <!-- 暂无收货地址提示 -->
            <div v-else class="tip-box">
                <div class="tip">
                    <img src="../../assets/geren/tip_address.png">
                    <div class="tip-add-btn" @click="addAddress">添加地址</div>
                </div>
            </div>
        </div>

        <van-popup class="indextop" v-model="show" round>
            <div class="popMain">
                <div class="content">
                    <div class="items">
                        <div class="items-title">联系人:</div>
                        <input type="text" placeholder="请输入收货人姓名" class="items-input" v-model="address.addressName" />
                    </div>
                    <div class="items">
                        <div class="items-title">手机号码:</div>
                        <input type="text" placeholder="请输入收货人手机号" class="items-input" v-model="address.addressTel" />
                    </div>
                    <div class="items pad-right">
                        <div class="items-title">所在地区:</div>
                        <input type="text" placeholder="请选择省、市、区" class="items-input" readonly="readonly"
                            v-model="address.addressZone" @click="showPic" />
                        <span class="mui-icon mui-icon-arrowright"></span>
                    </div>
                    <div class="items">
                        <div class="items-title">详细地址:</div>
                        <textarea placeholder="如道路、门牌号、小区、楼栋号、单元室" class="items-textarea"
                            v-model="address.addressDetail"></textarea>
                    </div>
                </div>
                <div class="btn-box btn-box1">
                    <button type="button" @click="submit">保存</button>
                </div>
            </div>
        </van-popup>


        <van-popup v-model="showPicker" round position="bottom">
            <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
                @finish="onFinish" />
        </van-popup>

    </div>

</template>

<script>

import { cityData3 } from '../../../public/js/city.data-3'

import { addUserAddr, listUserAddress, delUserAddr } from '../../network/user'

export default {
    name: 'HomeR',
    data() {
        return {
            addressList: [], //地址列表
            show: false,
            address: {
                addressId: '',
                addressName: "",
                addressTel: "",
                addressZone: "",
                addressDetail: "",
            },
            showPicker: false,
            options: cityData3,
            cascaderValue: '',
            flag: 'add',
            add_flag: localStorage.add_flag || 0
        }
    },
    mounted() {

    },
    methods: {
        liClick(obj) {
            if (this.add_flag == 1) {
                localStorage.address = JSON.stringify(obj)
                localStorage.add_flag = 0
                this.$router.go(-1)
            }
        },
        editClick(obj) {
            this.flag = 'edit'

            console.log(obj);
            this.address.addressId = obj.addressId
            this.address.addressName = obj.userName
            this.address.addressTel = obj.userTel
            this.address.addressZone = obj.userAddr.split(' ')[0]
            this.address.addressDetail = obj.userAddr.split(' ')[1]
            this.show = true
        },
        delClick(id) {
            var that = this;
            this.$dialog.confirm({
                title: '提示',
                message: '是否删除该地址',
                confirmButtonText: '确认',
            })
                .then(function () {
                    delUserAddr({
                        addressId: id
                    }).then(res => {
                        if (res.flag) {
                            that.$toast('删除成功')
                            that.getAddressList()
                        } else {
                            that.$toast('删除失败')
                        }
                    })
                })
        },
        onFinish(selectedOptions) {
            console.log(selectedOptions);

            this.address.addressZone = ''
            selectedOptions.selectedOptions.forEach(item => {
                this.address.addressZone += item.text
            })

            console.log(this.address.addressZone);

            this.showPicker = false
        },
        showPic() {
            this.showPicker = true
        },
        getAddressList() {
            listUserAddress({
                userId: localStorage.userId
            }).then(res => {
                if (res.flag) {
                    this.addressList = res.data
                    console.log(this.addressList);
                }
            })
        },
        submit() {
            if (this.address.addressName.length > 5) {
                return this.$toast("收货人姓名不能超过五个字");
            }
            if (this.address.addressName.trim().length === 0) {
                return this.$toast("请输入收货人姓名");
            }
            if (this.address.addressTel.length != 11) {
                return this.$toast("请输入正确的11位手机号码");
            }
            if (this.address.addressDetail.trim().length === 0 || this.address.addressZone.trim().length === 0) {
                return this.$toast("请输入收货人地址");
            }

            var str = this.address.addressZone + ' ' + this.address.addressDetail

            console.log(this.address);
            console.log(str);



            // return
            addUserAddr({
                addressId: this.flag == 'edit' ? this.address.addressId : '',
                userName: this.address.addressName,
                userTel: this.address.addressTel,
                userAddr: str,
                userId: localStorage.userId
            }).then(res => {
                if (res.flag) {
                    this.$toast('保存成功')
                    this.getAddressList()
                    this.show = false
                    this.address = {
                        addressName: "",
                        addressTel: "",
                        addressZone: "",
                        addressDetail: "",
                    }
                } else {
                    this.$toast('保存失败')
                }
            })



        },

        addAddress() {
            this.flag = 'add'
            this.show = true
        },

        toBack() {
            this.$router.go(-1)
        },


    },
    created() {
        this.getAddressList()

        console.log(this.options);
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}

.pageMain {
    height: 100vh;
    background: #f2f2f2;
}

.contentBox {
    box-sizing: border-box;
    padding: 110px 24px 24px;
    width: 100%;
}


.address-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 16px;
}

.address-text {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 24px;
    color: #666;
    margin-bottom: 16px;
}

.address-border {
    margin-bottom: 16px;
    border-bottom: 2px solid #e6e6e6;
}

.address-items {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 0 10px #e2e2e2;
    margin-bottom: 16px;
}

.icon-items {
    padding: 24px 0;
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
}

.icon-box {
    display: flex;
}

.icon-box-style {
    display: flex;
    align-items: center;
}

.icon-box-img {
    display: block;
    width: 32px;
    height: 32px;
    margin-right: 6px;
}

.mr-8 {
    margin-right: 16px;
}

.icon-box-style span {
    line-height: 1;
}

.set-address-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
}

.btn-box {
    display: block;
    position: fixed;
    bottom: 56px;
    left: 0;
    width: 100%;
    height: 88px;
    padding: 0 24px;
}

.btn-box button {
    width: 100%;
    height: 100%;
    padding: 16px 0;
    border: none;
    border-radius: 44px;
    background: #FF3B14;
    font-size: 28px;
    color: #FFF;
}

.default-tag {
    width: 116px;
    padding: 6px 0;
    line-height: 1;
    background: #FF8023;
    color: #FFF;
    border-radius: 16px 0 16px 0;
    text-align: center;
}

.tip-box {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
}

.tip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 720px;
}

.tip img {
    display: block;
    width: 376px;
}


.tip-add-btn {
    width: 188px;
    height: 88px;
    margin-top: 40px;
    border: 2px solid #ff4249;
    border-radius: 16px;
    font-size: 30px;
    color: #ff4249;
    text-align: center;
    line-height: 88px;
}





.popMain {
    box-sizing: border-box;
    padding: 48px;
    width: 700px;
}




.flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.default-title {
    font-size: 30px;
    color: #333;
}

.items {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding-left: 160px;
    margin-bottom: 32px;
}

.items:last-child {
    margin-bottom: 0;
}

.items .items-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 44px;
    line-height: 44px;
    font-size: 30px;
    color: #333;
}

.items .items-input {
    margin-bottom: 0;
    width: 100%;
    height: 44px;
    border: none;
    padding: 0;
    font-size: 30px;
    color: #333;
}

.items .items-textarea {
    width: 100%;
    height: 88px;
    margin-bottom: 0;
    border: none;
    padding: 0;
    font-size: 30px;
    color: #333;
}

.items .mui-icon-arrowright {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 44px;
    color: #999;
}

.items.pad-right {
    padding-right: 44px;
}

.btn-box {

    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 88px;
    padding: 0 24px;
}

.btn-box1 {
    position: relative !important;
    margin-top: 200px !important;
}

.btn-box button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 16px 0;
    border: none;
    border-radius: 44px;
    background: #FF3B14;
    font-size: 28px;
    color: #FFF;
}

.mui-picker,
.mui-poppicker {
    background-color: #F2F2F2;
}

.mui-btn-blue,
.mui-btn-primary,
input[type=submit] {
    background: #FF3B14;
    border: 2px solid #FF3B14;
}
</style>